<template>
  <div class="app-container background">
    <div class="registerBox">
      <div class="register-form">
        <el-row :gutter="16">
          <el-col :span="24">
            <div class="register-main-title">Sign Up</div>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form ref="registerFormRef" :model="registerForm" :rules="rules" size="large" class="register-style-form" label-position="left" label-width="80px">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="registerForm.userName" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="registerForm.nickName" placeholder="请输入昵称" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <div class="email-input-container">
                  <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
                  <el-tooltip 
                    content="邮箱是重置密码时唯一的接收验证码方式，请填写真实有效的邮箱地址" 
                    placement="top"
                    effect="dark"
                  >
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
              </el-form-item>
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="registerForm.phoneNumber" placeholder="请输入手机号（可选）" />
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="registerForm.gender">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" show-password />
              </el-form-item>
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="24">
            <div class="button">
              <el-button type="primary" @click="submitRegister(registerFormRef)" class="register-button">注册</el-button>
              <el-button type="text" @click="goLogin">已有账号？去登录</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Register">
import { clearCookie, register } from "@/api/login";
import { ElMessage } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { useRouter ,useRoute } from "vue-router";
import { useRouteStore } from "@/store/route";
const router = useRouter();
const route = useRoute();
const routeStore = useRouteStore();
const registerFormRef = ref();
const registerForm = reactive({
  userName: "",
  password: "",
  confirmPassword: "",
  nickName: "",
  email: "",
  phoneNumber: "",
  gender: null
});
const rules = {
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { validator: (rule: any, value: string, callback: any) => {
        const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
        if (!emailPattern.test(value)) {
          callback(new Error("邮箱格式不正确"));
        } else {
          callback();
        }
      }, trigger: ["blur", "change"] }
  ],
  phoneNumber: [
    { validator: (rule: any, value: string, callback: any) => {
        if (value && !/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }, trigger: ["blur", "change"] }
  ],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    { validator: (rule: any, value: string, callback: any) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      }, trigger: ["blur", "change"] }
  ]
};
const submitRegister = async(formEl: any) => {
  if (!formEl) return;
  formEl.validate(async (valid: boolean) => {
    if (valid) {
      await register(registerForm);
      ElMessage.success("注册成功");
      await goLogin();
    }
  });
};
const goLogin = async() => {
  await clearCookie();
  const query = routeStore.routeQuery;
  router.push({ path: "/login" ,query:query });
};
</script>

<style lang="scss" scoped>
.background {
  background: white;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.registerBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-form {
  width: 340px;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  text-align: center;
}

.register-main-title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #24292f;
  margin-bottom: 20px;
  text-align: center;
}

.register-style-form {
  width: 100%;
}

.register-button {
  width: 100%;
  margin-top: 8px;
}

.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.el-input, .el-input__inner, .el-input__wrapper {
  width: 100% !important;
  box-sizing: border-box;
}

.el-form-item__label {
  font-size: 14px !important;
}

.email-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-icon {
  color: #909399;
  font-size: 16px;
  padding: 0;
  margin: 0;
  min-width: auto;
  height: auto;
}

.help-icon:hover {
  color: #409eff;
}

@media (max-width: 600px) {
  .register-form {
    width: 98vw;
    min-width: unset;
    padding: 8px;
    box-shadow: none;
    border-radius: 0;
  }
  .register-main-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .el-form-item {
    margin-bottom: 10px !important;
  }
  .el-input__inner, .el-input__wrapper {
    font-size: 16px !important;
    padding: 12px 10px !important;
  }
  .el-radio-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  .register-button {
    width: 90vw;
    min-width: 120px;
    max-width: 340px;
  }
  .register-link {
    font-size: 14px;
    margin-top: 10px;
  }
  .registerBox {
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
  }
  .background {
    padding: 0;
  }
}
</style> 